<template>
    <div class="show-swiper-wrapper">
        <p class="show-toast-title">toast展示</p>
        <div class="item">
            <divider>基础调用</divider>
            <my-swiper>
                <my-swiper-item :width="7.5" v-for="item in list" :key="item.id">
                    <img :src="item.img" alt="">
                </my-swiper-item>
            </my-swiper>
        </div>
        <div class="item">
            <divider>自动轮播</divider>
            <my-swiper :automation="2000" paging="right">
                <my-swiper-item :width="7.5" v-for="item in list" :key="item.id">
                    <img :src="item.img" alt="">
                </my-swiper-item>
            </my-swiper>
        </div>
        <div class="item">
            <divider>循环有按钮</divider>
            <my-swiper :nextBtn="true" :automation="2000" :loop="true" paging="left">
                <my-swiper-item :width="7.5" v-for="item in list" :key="item.id">
                    <img :src="item.img" alt="">
                </my-swiper-item>
            </my-swiper>
        </div>
        <div class="item">
            <divider>缩进模式</divider>
            <my-swiper :zoom="true" :retract="true" :automation="3000" :oHeight="'3rem'" eight="3" :loop="true" paging="none">
                <my-swiper-item :width="5" height="3"  v-for="item in list" :key="item.id">
                    <img :src="item.img" alt="">
                </my-swiper-item>
            </my-swiper>
        </div>
            <divider>查看源码</divider>
            <my-button class="button-item" @button-click="pushLink" text="查看demo源码" size="lang" />

    </div>
</template>

<script>
    import MySwiper from '../components/slider/mySwiper'
    import MySwiperItem from '../components/slider/mySwiperItem'
    import Divider from '../components/divider'
    import MyButton from '../components/myButton'
    export default {
        name: 'showSwiper',
        components: {
            MySwiper,
            MySwiperItem,
            Divider,
            MyButton
        },
        data() {
            return {
                // 拿到本地实验要换路径偶
                list: [
                    {
                        img: require('../../static/1.jpg'),
                        id: 1
                    },
                    {
                        img: require('../../static/2.jpg'),
                        id: 2
                    },
                    {
                        img: require('../../static/3.jpg'),
                        id: 3
                    },
                    {
                        img: require('../../static/4.jpg'),
                        id: 4
                    }
                ]
            }
        },
        methods: {
            pushLink() {
                this.$router.push(`/soundCodeShow${this.$route.fullPath}`)
            }
        }
    }
</script>

<style scoped>
    .show-swiper-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        padding-bottom: 1rem;
    }
    .show-swiper-wrapper .item {
        width: 100%;
    }
    .show-swiper-wrapper .item img {
        width: 100%;
        height: 100%;
    }
</style>
